<template>
    <div>
      <div style="position: relative;" v-if="isShow">
        <div style="background-color: #ffffff;padding-bottom: 10px;">
          <div style="padding:20px 10px 10px;">
            <div>
              <img :src="coupon.couponImg || 'https://wld001.oss-cn-nanjing.aliyuncs.com/file/2023/03/29/ff6740c2-f6ba-4e90-bd0c-f8c70db22aea.jpg'" alt="">
            </div>

            <div class="ceremony">使用电站: {{ coupon.stationName ||'无限制'}}</div>
            <div class="price">
              <div class="money">可领取度数：</div>
              <div class="yuan">{{ coupon.dischargingDegree }}</div>
              <!-- <div class="miaoPirce">秒杀价</div> -->
              <div class="stock">总发放度数：{{ coupon.totalKilowattHour }}</div>
            </div>
          </div>
          <!-- <div class="ceremony">
            满{{ coupon.fullMoney ? coupon.fullMoney : 0 }}元减{{ coupon.money ? coupon.money : 0 }}
          </div> -->

        </div>
        <div class="content">
          <div class="message">免费电使用须知：</div>
          <div class="activity">
            1、免费电仅可用于归属电站内充电抵扣，不支持交易，互换，兑换，提现等操作；
          </div>
          <div class="activity">
            2、免费电与其他优惠项目不可共用，同时拥有多项优惠项目时，优先使用免费电；
          </div>
          <div class="activity">
            3、免费电能且仅能跟会员折扣叠加使用；
          </div>
          <div class="activitys">
            4、免费电每日仅可使用一次，首单自动抵扣；
          </div>
          <div class="activitys">
            5、免费电每次仅可使用10度，充电超过10度自动抵扣；
          </div>
          <div class="activitys">
            (3)每场券数量{{ coupon.couponNum ? coupon.couponNum : 0 }}份，每个时段每人限抢1份；先到先得，抢完为止。
          </div>
          <div class="activitys">
            (4)抢购的红包券、满减券、直降券、服务费折扣券均有
          </div>
          <div class="activity">
            4、其他规则
          </div>
          <div class="activitys">
            (1)活动期间，同一用户限抢1份；
          </div>
          <div class="activitys">
            (2)本活动中的新用户特指未在卫莱电小程序上完成充电消费的用户
          </div>
          <div class="activitys">
            (3)红包券、满减券、直降券、服务费折扣券为特殊数字
            化特惠商品，支付成功后不支持在线退款；
          </div>
  
          <div class="activitys">
            (4)如有疑向，详情请咨询客服：18758321769
          </div>
        </div>
        <div class="buy">
          <van-button type="primary" block style="width: 90%;margin: 0 auto;" @click="receive">立即领取</van-button>
        </div>
        <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
          <van-field v-model="model.phone" label="手机号" style="margin-top: 20px;" placeholder="请输入手机号后领取" />
          <van-button type="primary" block size="small" style="width: 90%;;margin: 0 auto ;margin-top: 10px"
            @click="received">领取</van-button>
        </van-popup>
      </div>
      <van-empty description="此优惠券不可免费领取" v-else />
    </div>
  </template>
    
  <script>
  
  import { Dialog } from 'vant';
  export default {
    name: 'App',
  
    data() {
      return {
        show: false,
        model: {
          phone: "",
          dischargingElectricityId:'',
        },
        messgae: '领取成功',
        coupon: "",
        isShow:true,
        id:""
      }
    },
    created() {
      let id = ""
      for(let i=0;i< this.$router.currentRoute.query.id.length;i++){
        id+=""+ this.getLink(this.$router.currentRoute.query.id.slice(i, i+1))
      }
      this.id=id
      this.getCoupon(id)
    },
    methods: {
      getLink(num) {
        if (num == 'a') {
          num = '1'
        } else if (num == 'c') {
          num = '7'
        } else if (num == 'x') {
          num = '8'
        } else if (num == 'e') {
          num = '2'
        } else if (num == 'f') {
          num = '3'
        } else if (num == 'k') {
          num = '4'
        } else if (num == 'r') {
          num = '5'
        } else if (num == 'm') {
          num = '6'
        } else if (num == 'n') {
          num = '9'
        } else if (num == 'g') {
          num = '0'
        }
        return num
      },
      getCoupon(id) {
        this.model.dischargingElectricityId =id
        this.$api.freePower_getCoupon(id)
          .then(res => {
            if (res.data.code == 200) {
              this.isShow = true
              this.coupon = res.data.data
            } else if (res.data.code == 203) {
              this.isShow = false
            }
          })
          .catch(error => {
            console.log(error)
          });
      },
      received() {
        let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        this.model.couponId = this.coupon.couponId
        this.show = false
        if (!reg.test(this.model.phone)) {
          Dialog.alert({
            title: '免费电量',
            message: '请输入正确的手机号',
          })
        } else {
          this.$api.grantPower_receiveByPhone(this.model)
            .then(res => {
              Dialog.alert({
                title: '免费电量',
                message: res.data.msg,
              })
            })
            .catch(error => {
              console.log(error);
            })
  
        }
  
      },
      receive() {
        this.show = true
      }
    },
  
  }
  </script>
    
  <style>
  .buy {
    width: 100%;
    padding: 10px 5px;
    border-top: 1px solid #f7f8f9;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  
  .activitys {
    text-align: left;
    font-size: 14px;
    color: grey;
    margin-left: 5px;
  }
  
  .activity {
    text-align: left;
    font-size: 14px;
    color: grey;
    padding: 2px 0;
  }
  
  .message {
    font-weight: bold;
    text-align: left;
    margin-bottom: 20px;
  }
  
  .content {
    padding: 20px 10px 20px;
    background-color: #ffffff;
    margin-top: 10px;
    margin-bottom: 70px;
  }
  
  .ceremony {
    text-align: left;
    padding-left: 10px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  body {
    background-color: #f0f2f5;
  }
  
  .money {
    font-size: 14px;
    color: red;
    font-weight: bold;
  }
  
  .yuan {
    font-size: 22px;
    font-weight: bold;
    color: red;
  }
  
  .miaoPirce {
    font-size: 12px;
    background-color: red;
    color: #ffffff;
    padding: 2px 4px;
    margin-left: 10px;
  }
  
  .stock {
    font-size: 14px;
    color: grey;
    margin-left: auto;
  }
  
  .price {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
  
  img {
    width: 90%;
    height: 120px;
    border-radius: 5px;
  }
  
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 30px;
  }
  </style>